<template>
	<view class="checkDetails">
		<view class="checkDetails-top ff-bg-blue ff-padding-12">
			<view class="checkDetails-top-content ff-relative ff-bg-fff ff-border-radius-10 ff-padding-12">
				<view class="ff-flex ff-align-items-1 ff-margin-bottom-10 ff-flex-between">
					<view class="ff-font-16 checkTitle ff-line-height-1-3 ff-font-weight-600">
						{{checkDetails.projectName}}
					</view>
					<view @click="refreshClick" v-if="checkDetails.cancelStatus != 2 && checkDetails.checkStatus != 2"
						class="ff-flex ff-align-items-1 ff-color-blue">
						<image class="refreshIcon ff-margin-right-3"
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/refresh1.png"
							mode=""></image>
						<view>刷新</view>
					</view>
				</view>
				<view class="stateList ff-margin-bottom-8" v-if="!typeState2">
					<view v-if="checkDetails.checkStatus == 0">
						<view class="checkState1">未发起</view>
					</view>
					<view v-if="checkDetails.checkStatus == 1" class="ff-flex ff-align-items-1">
						<view class="checkState2">抽查中</view>
					</view>
					<view v-if="checkDetails.checkStatus == 2" class="ff-flex ff-align-items-1">
						<view class="checkState3">已通过抽查</view>
					</view>
					<view v-if="checkDetails.checkStatus == 3" class=" ff-align-items-1 ff-flex">
						<view class="checkState4">未通过抽查</view>
						<view class="ff-margin-left-15">
							<view v-if="checkDetails.evidenceStatus == 1" class="checkState4_3">证明材料：未提交</view>
							<view v-if="checkDetails.evidenceStatus == 2" class="checkState4_1">证明材料：未读</view>
							<view v-if="checkDetails.evidenceStatus == 3" class="checkState4_2">证明材料：已读</view>
						</view>
					</view>
				</view>
				<view class="ff-color-5C5F65 ff-relative">
					<view class="ff-margin-bottom-10 ff-flex ff-align-items-1">
						<view>执业人：{{checkDetails.username}}</view>
					</view>
					<view class="ff-margin-bottom-10">本次执业时长：{{checkDetails.duration}}</view>
					<view>技术服务机构：{{checkDetails.orgName}}</view>
					<view class="ff-margin-top-10" v-if="!typeState2">发起抽查时间：{{checkDetails.checkTime}}</view>
					<image v-if="checkDetails.cancelStatus == 2" class="cancelIcon"
						src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/material3_icon.png"
						mode=""></image>
				</view>
				<!-- 作废记录 -->
				<view v-if="checkDetails.cancelUsername"
					class="checkDetails-termrecord ff-color-5C5F65 ff-bg-fff ff-border-radius-10">
					<view class="ff-font-15 ff-font-weight-600">作废记录</view>
					<view>
						<view class="ff-flex">
							<view>作废原因：</view>
							<view style="width: 60%;">{{checkDetails.cancelReason ||'--'}}</view>
						</view>
						<view class="ff-flex">
							<view>作废人：</view>
							<view>{{checkDetails.cancelUsername ||'--'}}</view>
						</view>
						<view class="ff-flex">
							<view>作废时间：</view>
							<view>{{checkDetails.cancelTime ||'--'}}</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 具体内容 -->
		<view class="checkDetails-content" :style="{'margin-top': checkDetails.cancelUsername ? '-25rpx': '-25rpx'}">
			<view class="checkDetails-content-tab ff-bg-fff">
				<u-tabs :list="tabList" :height="100" :current="tabCurrent" @change="changeTab"></u-tabs>
			</view>
			<view v-if="tabList.length > 1 && tabCurrent == 0">
				<view v-if="checkDetails.evidenceStatus != 1"
					class="checkDetails-content-material ff-color-5C5F65 ff-margin-top-12 ff-margin-bottom-12 ff-margin-left-15 ff-margin-right-15 ff-border-radius-10 ff-bg-fff ff-padding-12">
					<view class="ff-flex ff-margin-bottom-10">
						<view>提交时间：</view>
						<view>{{checkDetails.evidenceSubmitTime || '--'}}</view>
					</view>
					<view class="ff-flex ff-margin-bottom-10">
						<view>提交内容：</view>
						<view style="width: 75%;">
							<view>{{checkDetails.evidenceDescription || '--'}}</view>
							<u-row gutter="20">
								<u-col span="4" v-for="(item, index) of checkDetails.evidenceAttachList" :key="index">
									<view class="deviceImg ff-margin-top-10" @click="previewImgClick(item, 1)">
										<image :src="item" mode="" />
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<view class="ff-bg-F3F8FE ff-padding-12 ff-border-radius-5 ff-font-13 ff-color-333">
						<view class="ff-margin-bottom-8">查收状态：
							<text v-if="checkDetails.evidenceStatus == 1" class="ff-color-BCBFCC">未提交</text>
							<text v-if="checkDetails.evidenceStatus == 2" class="ff-color-red">未读</text>
							<text v-if="checkDetails.evidenceStatus == 3" class="ff-color-green">已读</text>
						</view>
						<view class="ff-margin-bottom-8">查收人：{{checkDetails.evidenceReceiveUsername || '--'}}</view>
						<view>查收时间：{{checkDetails.evidenceReceiveTime || '--'}}</view>
					</view>
				</view>
				<view v-else class="ff-text-center ff-margin-top-50 ff-width-100 noData">
					<view>
						<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/noneInfo.png"
							class="noDataImg" :style="{paddingTop: topStyle}"></image>
						<view class="ff-font-16 ff-margin-15 ff-color-gray">未提交证明材料</view>
					</view>
				</view>
			</view>
			<view v-if="(tabList.length > 1 && tabCurrent == 1)||(tabList.length < 2 && tabCurrent == 0)"
				class="checkDetails-content-details">
				<view
					class="ff-margin-top-12 ff-margin-bottom-12 ff-margin-left-15 ff-margin-right-15 ff-padding-12 ff-color-5C5F65 ff-bg-fff ff-border-radius-10">
					<view
						class="ff-padding-top-3 ff-padding-bottom-15 ff-border-bottom ff-flex ff-align-items-1 ff-flex-between">
						<view>短信送达情况</view>
						<view>
							<text v-if="checkDetails.smsStatus == 1" class="ff-color-red">未送达</text>
							<text v-if="checkDetails.smsStatus == 2" class="ff-color-red">未送达</text>
							<text v-if="checkDetails.smsStatus == 3" class="ff-color-green">已送达</text>
						</view>
					</view>
					<view
						class="ff-padding-top-15 ff-padding-bottom-15 ff-border-bottom ff-flex ff-align-items-1 ff-flex-between">
						<view>短信接收时间</view>
						<view class="ff-color-ccc">{{checkDetails.receiveTime || '--'}}</view>
					</view>
					<view v-if="checkDetails.checkStatus == 2">
						<view
							class="ff-padding-top-15 ff-padding-bottom-15 ff-border-bottom ff-flex ff-align-items-1 ff-flex-between">
							<view>完成抽查时间</view>
							<view class="ff-color-ccc">{{checkDetails.checkResponseTime || '--'}}</view>
						</view>
						<view
							class="ff-padding-top-15 ff-padding-bottom-15 ff-border-bottom ff-flex ff-align-items-1 ff-flex-between">
							<view>打卡位置</view>
							<view @click="addressClick" class="ff-color-blue adressIcon ff-align-items-1 ff-flex">
								<image
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/check-address.png"
									mode=""></image>
								<view>查看GPS位置</view>
							</view>
						</view>
						<view class="ff-padding-top-15 ff-padding-bottom-15">
							<view class="ff-margin-bottom-15">打卡图片</view>
							<u-row gutter="20">
								<u-col span="3">
									<view class="deviceImg" @click="previewImgClick(item, 3)">
										<image :src="checkDetails.faceUrl" mode="" />
									</view>
								</u-col>
							</u-row>
							<view v-if="!checkDetails.faceUrl" class="ff-color-ccc">暂无</view>
						</view>
					</view>
					<view v-if="checkDetails.checkStatus == 3">
						<view class="ff-padding-top-15 ff-padding-bottom-15 ff-border-bottom ff-flex ff-flex-between">
							<view>失败原因</view>
							<view class="ff-color-red ff-text-right ff-line-height-1-3" style="width: 65%;">
								{{checkDetails.checkFailedReason || '--'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="checkDetails-but" v-if="checkDetails.checkStatus != 0 && checkDetails.cancelStatus != 2">
			<u-button @click="cancelClick" type="error">作废本次执业</u-button>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<!-- 作废维保弹框 -->
		<u-modal v-model="voidModal" title="请输入作废原因" show-cancel-button="true" :content-style="{ 'line-height': '1.5' }"
			@confirm="voidConfirm">
			<view class="slot-content ff-padding-15">
				<view class="ff-font-13 ff-margin-bottom-10">该执业人员本期间的有效工时将被作废，需要重新执业，请确认是否作废？</view>
				<textarea v-model.trim="cancelReason" maxlength="-1" class="ff-border-radius-5 ff-padding-5 ff-font-14"
					placeholder="*请输入"></textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				voidModal: false, // 作废维保弹框显/隐
				cancelReason: '', // 作废原因
				checkDetailsId: '',
				checkDetails: {}, // 抽查详情
				tabList: [], // tab数据
				tabCurrent: 0 // tab index
			}
		},
		onLoad(e) {
			this.checkDetailsId = e.id
			this.getCheckDetails(this.checkDetailsId) // 获取抽查详情
		},
		computed: {},
		methods: {
			// 获取抽查详情
			async getCheckDetails(id) {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: `/maintenanceRecordCheckSupervise/checkRefreshAndGet/${id}`
				})
				// console.log('获取抽查详情', data)
				this.$refs.loading.closeLoading(); // 关闭loading动画
				if (data.code == 200) {
					this.checkDetails = data.data
					if (this.checkDetails.evidenceStatus != 0) {
						this.tabList = [{
							name: '证明材料'
						}, {
							name: '抽查详情'
						}]
					} else {
						this.tabList = [{
							name: '抽查详情'
						}]
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 刷新
			refreshClick() {
				this.getCheckDetails(this.checkDetailsId) // 获取抽查详情
			},
			// 切换tab
			changeTab(e) {
				// console.log('点击切换---', e)
				this.tabCurrent = e
			},
			// 查看图片放大
			previewImgClick(item, type) {
				if (type == 1) {
					uni.previewImage({
						urls: this.checkDetails.evidenceAttachList,
						current: item
					});
				}
				if (type == 3) {
					let imgs = []
					imgs.push(this.checkDetails.faceUrl)
					uni.previewImage({
						urls: imgs,
						current: item
					});
				}
			},
			// 查看打卡位置
			addressClick() {
				uni.openLocation({
					latitude: this.checkDetails.checkLatitude,
					longitude: this.checkDetails.checkLongitude,
					success: function() {
						console.log('success');
					}
				});
			},
			// 作废操作
			async cancelClick() {
				let that = this
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: `/maintenanceRecordCheckSupervise/recordCheckBeforeCancel/${this.checkDetailsId}`
				})
				this.$refs.loading.closeLoading(); // 关闭loading动画
				// console.log('作废之前的校验----', data)
				if (data.code == 200) {
					if (data.data.checkResult == 3) {
						this.voidModal = true
					} else {
						uni.showModal({
							title: data.data.title,
							content: data.data.content,
							confirmColor: '#3178FF',
							confirmText: '好的',
							customStyle: {
								title: {
									textAlign: 'center'
								},
								content: {
									textAlign: 'left'
								}
							},
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									// console.log('用户点击确定')
									that.refreshClick() // 刷新页面
								}
							},
						})
					}
				} else {
					uni.showModal({
						title: '温馨提示',
						content: data.msg,
						confirmColor: '#3178FF',
						confirmText: '好的',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定')
							}
						},
					})
				}
			},
			// 作废本次执业---确定操作
			voidConfirm() {
				this.voidModal = true
				if (!this.cancelReason) {
					this.$refs.uToast.show({
						title: '请输入作废原因',
						type: 'error'
					});
					return
				}
				this.$refs.loading.openLoading('作废中···');
				let params = {
					id: this.checkDetailsId,
					cancelReason: this.cancelReason
				}
				this.$http.post({
					url: '/maintenanceRecordCheckSupervise/recordCancel',
					data: params
				}).then(res => {
					// console.log('作废本次执业返回的结果数据-----', res);
					this.$refs.loading.closeLoading();
					this.cancelReason = ''
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						});
						this.voidModal = false;
						this.getCheckDetails(this.checkDetailsId) // 获取抽查详情
					} else {
						let that = this
						uni.showModal({
							title: '温馨提示',
							content: res.msg,
							confirmColor: '#3178FF',
							confirmText: '好的',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									// console.log('用户点击确定')
									that.voidModal = false;
									that.getCheckDetails(that.checkDetailsId) // 获取抽查详情
								}
							},
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.checkDetails {
		padding-bottom: 160rpx;

		&-top {
			padding-bottom: 50rpx !important;
		}

		.refreshIcon {
			width: 35rpx;
			height: 32rpx;
		}

		.stateList {
			.img1 {
				width: 120rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.img2 {
				width: 194rpx;
				height: 40rpx;
			}
		}

		&-termrecord {
			padding: 30rpx 40rpx 10rpx;
			margin: 20rpx 0 0;
			background-image: linear-gradient(#FFEBEB, #FFFAFA, #FFEBEB);

			.ff-font-15 {
				color: #F31C01;
				margin-bottom: 30rpx;
			}

			.ff-flex {
				margin-bottom: 20rpx;

				.ff-color-999 {
					width: 221rpx;

				}
			}
		}

		&-content {
			&-tab {
				position: relative;
				z-index: 999;
				// margin-top: -50rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				overflow: hidden;
			}
		}

		.deviceImg {
			image {
				width: 100%;
				height: 140rpx;
			}
		}

		&-but {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}

	.cancelIcon {
		position: absolute;
		right: 5%;
		top: -15%;
		width: 135rpx;
		height: 95rpx;
	}

	.adressIcon {
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	textarea {
		width: 92%;
		border: 2rpx solid #999;
		height: 200rpx;
	}

	.checkState1 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #A6A6A6, #C4C4C4);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #C4C4C4 transparent transparent transparent;
		}
	}

	.checkState2 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #3379FF, #7FA9FC);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #7FA9FC transparent transparent transparent;
		}
	}

	.checkState3 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #0CC84B, #77E28A);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #77E28A transparent transparent transparent;
		}
	}

	.checkState4 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #EF322F, #FA7977);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #FA7977 transparent transparent transparent;
		}
	}

	.checkState4_3 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #EFF2F7, #EFF2F7);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #7A7A7A;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #EFF2F7 transparent transparent transparent;
		}
	}

	.checkState4_2 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #EFF2F7, #EFF2F7);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #10B680;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #EFF2F7 transparent transparent transparent;
		}
	}

	.checkState4_1 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #EFF2F7, #EFF2F7);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #D61F1F;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #EFF2F7 transparent transparent transparent;
		}
	}

	.noData {
		width: 100%;
		// height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.noDataImg {
			width: 300rpx;
			height: 320rpx;
		}
	}

	.checkTitle {
		width: 530rpx;
	}
</style>